
document.addEventListener("DOMContentLoaded", function () {
    function initializeMatchsDiv() {
        fetch("/football.json")
            .then(res => res.json())
            .then(data => {
                if (Array.isArray(data)) {
                    const matchsDivs = document.querySelectorAll("section.mths");
                    matchsDivs.forEach(matchsDiv => {
                        let innerHTML = "";
                        matchsDiv.innerHTML = "";
                        data.forEach(item => {
                            innerHTML += `
                                <li onclick="window.open('https://egyball1.com/live/1/${item.id}')">
                                        <div>${item.status}<br/><br/><b>${item.time}</b></div>
                                        <section>
                                        <a href="https://egyball1.com/live/1/${item.id}">
                                            <img src="${item['teamALogo']}">
                                            <span class='nowrap'>${item['teamA']}</span>
                                        </a>
                                        <b>${item['teamAScore']}</b>
                                        <span>-</span>
                                        <b>${item['teamBScore']}</b>
                                            <a href="https://egyball1.com/live/1/${item.id}">
                                            <img src="${item['teamBLogo']}">
                                            <span class='nowrap'>${item['teamB']}</span>
                                        </a>
                                        </section>
                                </li>                                 
                            `;
                        })
                        matchsDiv.innerHTML = `<ul>${innerHTML}</ul>`;
                    });

                    const cssNode = document.createElement("style");
                    cssNode.innerHTML = `
                        section.mths{margin-bottom:1rem;}
                        section.mths > ul{
                            display: grid;
                            grid-template-columns: repeat(2,1fr);
                            gap:1rem;
                            background-color: var(--color-bg);
                            padding: 1rem;
                            background: linear-gradient(90deg,rgba(131, 58, 180, .5) 0%, rgba(253, 29, 29, .5) 50%, rgba(252, 176, 69, .8) 100%),#833AB4;;
                            border-radius: .4rem;
                            background-size: 100% 100%;
                            background-position: cover;
                        }
                        section.mths > ul > li{
                            backdrop-filter: blur(4px) saturate(132%);
                            -webkit-backdrop-filter: blur(4px) saturate(132%);
                            background-color: rgba(0,0,0,0.4);
                            border-radius: 8px;
                            transition: all .2s ease-in;
                        }
                        section.mths > ul > li:hover{
                            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08);
                            transform:scale(1.04) translateY(-.5rem);     
                        }
                        section.mths > ul > li > section{
                            display: grid;
                            grid-template-columns: 4fr 2fr 1fr 2fr 4fr;
                            justify-items: center;
                            gap:1rem;
                            align-items: center;
                            padding: .4rem;
                            overflow:hidden;
                            padding: .5rem 0;
                        }
                        section.mths > ul > li > div{
                            text-align: center;
                            padding-top:1rem;
                            color:white;
                        }
                        section.mths > ul > li > section > a{
                            display: grid;
                            justify-items: center;
                            gap:.4rem;                            
                        }
                        section.mths > ul > li > section > a > img{
                            width: 2rem;
                            height: 2rem;
                            padding:  0;
                            transition: all .2s ease-in;
                        }
                        section.mths > ul > li:hover > section > a > img{
                            filter: brightness(1.1);
                            transform: scale(1.5);
                        }
                        section.mths > ul > li > section > b,
                        section.mths > ul > li > section > span,
                        section.mths > ul > li > section > a > span{
                            color:white;
                        }

                        section.mths > ul > li > div:hover,
                        section.mths > ul > li > section > a:hover,
                        section.mths > ul > li > section > b:hover,
                        section.mths > ul > li > section > a>span:hover,
                        section.mths > ul > li > section > a>img:hover{
                            cursor:pointer;
                        }
                        @media (max-width: 768px){
                            section.mths > ul{grid-template-columns:1fr 1fr;}
                            section.mths > ul > li > section > a > img{width:2.6rem;height:2.6rem;}
                        }
                        @media (max-width: 576px){
                            section.mths > ul{grid-template-columns:auto;
                        }
                    `;
                    document.head.appendChild(cssNode);
                }
            })
            .catch(error => {
                console.error("Error fetching or processing JSON:", error);
            });
    }
    initializeMatchsDiv();
});